<template>
  <div class="box sku-sale-collect">
    <div class="header">
      <div class="title">
        销售数据
        <span class="sub-title">2022.10.24 ~ 2022.10.28</span>
      </div>
      <div class="week-month-year">
        <div class="item" :class="{isChecked: activeShow==='1'}" @click="activeShow='1'">周</div>
        <div class="item" :class="{isChecked: activeShow==='2'}" @click="activeShow='2'">月</div>
        <div class="item" :class="{isChecked: activeShow==='3'}" @click="activeShow='3'">年</div>
      </div>
    </div>
    <div class="charts">
      <div class="chart">
        <div id="amount-collect" class="show" />
      </div>
      <div class="chart">
        <div id="region-collect" class="show" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from '@/utils/day.js'
import { getAmountCollectAPI, getRegionCollectAPI } from '@/api/workbench'
export default {
  name: 'SalesData',
  data() {
    return {
      activeShow: '1',
      startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
      endTime: dayjs().format('YYYY-MM-DD')
    }
  },
  computed: {
  },
  watch: {
    activeShow: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
        if (newVal === '3') {
          this.startTime = dayjs().year() + '-01-01'
          this.getRegionCollect(this.startTime, this.endTime)
          this.getAmountCollect(2, this.startTime, this.endTime)
        } else if (newVal === '2') {
          this.startTime = dayjs(this.chooseMonth).startOf('month').format('YYYY-MM-DD')
          this.getRegionCollect(this.startTime, this.endTime)
          this.getAmountCollect(1, this.startTime, this.endTime)
        } else {
          this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
          this.getRegionCollect(this.startTime, this.endTime)
          this.getAmountCollect(1, this.startTime, this.endTime)
        }
      }
    }
  },
  created() {
    this.getAmountCollect(this.activeShow, this.startTime, this.endTime)
    this.getRegionCollect(this.startTime, this.endTime)
  },
  methods: {
  // 销售额趋势图
    async getAmountCollect(n, s, e) {
      const { data } = await getAmountCollectAPI(n, s, e)
      console.log(data)
      const chartLine = document.getElementById('amount-collect')
      chartLine.setAttribute('_echarts_instance_', '')
      const mychart = echarts.init(chartLine)
      mychart.setOption({
        title: {
          text: '销售额趋势图',
          x: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 600,
            fontStyle: 'normal'
          }
        },
        grid: {
          top: '15%',
          left: '15%',
          right: '5%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis,
          axisPointer: {
            show: true,
            snap: true
          }
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              emphasis: {
                areaColor: '#FFF',
                shadowColor: '#215380',
                shadowOffsetY: 5 // 关键在这
              },
              select: {
                areaColor: '#FFF',
                shadowColor: '#215380',
                shadowOffsetY: 5
              }
            }
          }
        },
        series: {
          type: 'line',
          data: data.series.map(item => item / 100),
          smooth: true
        }
      }, true)
    },
    // 销售额分布
    async getRegionCollect(s, e) {
      const { data } = await getRegionCollectAPI(s, e)
      console.log(data)
      const chartBar = document.getElementById('region-collect')
      chartBar.setAttribute('_echarts_instance_', '')
      const mychart = echarts.init(chartBar)
      mychart.setOption({
        title: {
          text: '销售额分布',
          x: 'center',
          y: 'top',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          top: '15%',
          left: '22%',
          right: '5%',
          bottom: '15%'
        },
        xAxis: {
          triggerEvent: true,
          type: 'category',
          data: data.xAxis,
          axisLabel: {
            formatter: function(value) {
              let res = value
              if (res.length > 3) {
                res = res.substring(0, 3) + '\n' + '...'
              }
              return res
            }
          }
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        series: {
          type: 'bar',
          barWidth: 10,
          data: data.series.map(item => item / 100)
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            snap: true
          }
        }
      }, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.sku-sale-collect {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(40vh - 68px);
    min-height: 352px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 20px;
    .week-month-year {
        width: 129px;
        height: 34px;
        background: rgba(233,243,255,.37);
        border-radius: 10px;
        display: -webkit-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .item {
            width: 37px;
            height: 25px;
            font-size: 14px;
            color: #9ca3b4;
            cursor: pointer;
            display: -webkit-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .isChecked {
            background: #fff;
            -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
            box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
            border-radius: 7px;
            font-weight: 600;
            color: #333;
        }
    }
    .charts {
      display: flex;
      flex: 1;
      .chart {
        position: relative;
        display: inline-block;
        width: 50%;
        height: 100%;
        #amount-collect {
          height: 100%;
          width: 100%;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
          position: relative;
        }
        #region-collect {
          height: 100%;
          width: 100%;
          -webkit-tap-highlight-color: transparent;
          user-select: none;
          position: relative;
        }
    }
    }
}
</style>
